<template>
	<view class="index">
		<view class="tab-box">
			<view class="tab-1" @tap="changeTab('1')">
				<view class="tab-1-box">
					<view class="tab-icon" >
						<view class="img-box">
							<image class="tab-img" :src="tab1img" mode=""></image>
						</view>
						
					</view>
					<view class="tab-text" :class="tabIndex == '1'?'tab-text-active':''">首页</view>
				</view>
				
			</view>
			<view class="tab-2" @tap="changeTab('2')">
				<view class="tab-2-box">
					<view class="tab-icon">
						<view class="img-box">
						</view>
					</view>
					<view class="tab-text" :class="tabIndex == '2'?'tab-text-active':''">抢单</view>
				</view>
				
			</view>
			<view class="tab-3" @tap="changeTab('3')">
				<view class="tab-3-box">
					<view class="tab-icon">
						<view class="img-box">
							<image class="tab-img" :src="tab3img" mode=""></image>
						</view>
						
					</view>
					<view class="tab-text" :class="tabIndex == '3'?'tab-text-active':''">我</view>
				</view>
				
			</view>
			<view class="tab-cir" @tap="changeTab('2')">
				<image class="cir-img" src="../../static/tabBar/rob.png" mode=""></image>
			</view>
			
		</view>
		<view class="icon-cir"></view>
		
	</view>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
	methods: {
	  ...mapMutations({
	  	changeTabIndex: 'changeTab' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
	  }),
	  changeTab(index){
		 
		  uni.createSelectorQuery().selectViewport().scrollOffset(res => {
		  	console.log("竖直滚动位置" + res.scrollTop);
			
			let viewObj = {
				type:this.$store.state.terminalType,
				tab:this.$store.state.tab,
				offSetTop:res.scrollTop
			}
			
			this.$emit('viewTop',viewObj);
			this.changeTabIndex(index);
			
			// #ifdef APP-PLUS
			 if(index == 2 || index == 3){
					this.$emit('changeColor','#3595f9');
					plus.navigator.setStatusBarStyle('light');
			 }else{
					this.$emit('changeColor','#FFFFFF');
					plus.navigator.setStatusBarStyle('dark');
			 }
			// #endif
			this.$emit('useTop',viewObj);
			if(index == 1 ){
				this.$emit('_refresh');
			}
		  }).exec();
		  
		  		 
	  }
	},
	computed:{
		tabIndex(){
			return this.$store.state.tab;
		},
		tab1img(){
			return this.$store.state.tab=='1'?'/static/tabBar/home-active.png':'/static/tabBar/home.png'
		},
		tab3img(){
			return this.$store.state.tab=='3'?'/static/tabBar/center-active.png':'/static/tabBar/center.png'
		}
	}
};

</script>

<style scoped>
	.index{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 98upx;
		
		
	}
	.tab-box{
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #ffffff;
		border-top:solid 1px #e5e5e5;
	}
	.tab-box:after{
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: -1px;
		margin: 0 auto;
		z-index: 1;
		width: 100upx;
		height: 1px;
		background-color: #FFFFFF;
	}
	.icon-cir{
		position: absolute;
		left: 50%;
		bottom: 38upx;
		transform: translateX(-50%);
		border-radius: 50%;
		z-index: -1;
		width: 100upx;
		height: 100upx;
		background-color: #ffffff;
		border: solid 1px #e5e5e5;
	}
	.tab-cir{
		position: absolute;
		width: 80upx;
		height: 80upx;
		left: 50%;
		bottom: 42upx;
		transform: translateX(-50%);
		border-radius: 50%;
		background: white;
		border-bottom: 10upx solid white;
		font-size: 24upx;
		color: #999999;
		text-align: center;
		z-index: 2;
	}
	.tab-1,.tab-2,.tab-3{
		width: 33.33333%;
		height: 100%;
		position: absolute;
		bottom: 0;
		
		font-size: 24upx;
	}
	.tab-1-box,.tab-2-box,.tab-3-box{
		padding-top: 11upx;
		width: 100upx;
	}
	.tab-1-box{
		margin-left: 40upx;
	}
	.tab-2-box{
		margin: 0 auto;
	}
	.tab-3-box{
		margin-right: 40upx;
		float: right;
	}
	.tab-1{
		left: 0;
	}
	.tab-2{
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.tab-3{
		right: 0;
	}
	.tab-icon{
		width: 100%;
	}
	.img-box{
		width: 40upx;
		height: 40upx;
		margin: 0 auto;
	}
	.tab-img{
		width: 40upx;
		height: 40upx;
		
	}
	.tab-text{
		margin-top: 9upx;
		line-height: 1;
		text-align: center;
		color: #999999;
	}
	.cir-img{
		width: 80upx;
		height: 80upx;
		
	}
	.tab-text-active{
		color: #3595f9;
	}
	
</style>